<template>
    <div class="add-container">
        <div class="form-container">
            <el-form :model="formParam" :rules="rules" ref="custForm">
                <el-form-item label="Client Code" label-width="220px" prop="clientCode" required>
                    <el-select v-model="formParam.clientCode" filterable placeholder="choose">
                        <el-option :key="item.clientCode" :label="item.clientCode" :value="item.clientCode"
                            v-for="item in clients">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Carrier Code" label-width="220px" prop="carrierCode" required>
                    <el-select v-model="formParam.carrierCode" filterable placeholder="choose">
                        <el-option :key="item.carrierCode" :label="item.carrierCode" :value="item.carrierCode"
                            v-for="item in carriers">
                        </el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item label="Date" label-width="220px" prop="year" required>
                    <el-date-picker v-model="formParam.year" type="year" placeholder="Pick a year" />
                </el-form-item>
            </el-form>
            <div class="dialog-footer">
                <el-button @click="cancel">{{ $t("ship.button.cancel") }}</el-button>
                <el-button type="primary" :loading="isLoading" @click="submitApplyForm">Apply</el-button>
            </div>
            <div class="booking-no">
                <span style="padding-right: 8px">Fixture No：</span>
                <span>{{ formParam.fixtureNo || "" }}</span> 
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted,  reactive } from "vue";
import service from "@/utils/request";
import { ElMessage } from "element-plus";
import moment from "moment";
const router = useRouter(); 
let clients = reactive([])
let carriers = reactive([] as any); 

const formParam = reactive({
    clientCode: null,
    clientName: null,
    clientId: null,
    templateType:1,
    year: String(new Date().getFullYear()),
    carrierCode: null,   
    fixtureNo: null,
    carrierName: null
})
const rules = {
    clientCode: [{ required: true, message: "Client Code cann't be blank", trigger: "blur" }],
    carrierCode: [{ required: true, message: "Carrier Code cann't be blank", trigger: "blur" }],
    year: [{ required: true, message: "Year can't be null", trigger: "blur" }]
}

 
onMounted(async () => {
    let result = await service.get("/shipping/client/list");
    if (result) {
        clients = result.data
    }
    result = await service.get("/shipping/carrier/list");
    if (result) {
        carriers = result.data;
    }
})

// 提交申请
const isLoading = ref(false);
const custForm = ref();
const submitApplyForm = () => {     
    custForm.value.validate(async valid => {
        if (valid) {
            if (isLoading.value) return;
            isLoading.value = true;
            let carrierIndex = carriers.findIndex(item => item.carrierCode == formParam.carrierCode) 
            formParam.carrierName = carriers[carrierIndex].carrierName
            let clientIndex = clients.findIndex(item =>item.clientCode == formParam.clientCode)
            formParam.clientName = clients[clientIndex].fullName
            formParam.clientId =  clients[clientIndex].clientId
            formParam.year = moment(formParam.year).format('YYYY')
            service.post("/shipping/fixtureNote/apply", formParam)
                .then(result => {
                    if (result && result.data) {
                        formParam.fixtureNo = result.data || "";
                    }
                })
                .finally(() => {
                    isLoading.value = false;
                });
        }
    });
    //reset();
    //isTable.value=true
};
//表单重置
function reset() {
    const params = {
        clientCode: null,
        date: String(new Date().getFullYear()),
        carrierCode: null,
        fixtureNo: null,
        carrierName: null
    };
    Object.keys(params).forEach(key => {
        formParam[key] = params[key];
    });
}
const cancel = () => {
    router.push({
        path: "/contract/fixtureNote", query: {
            fixtureNo: formParam.fixtureNo,
            carrierCode: formParam.carrierCode,
            clientCode: formParam.clientCode,
        }
    });
    reset()
}

const copyText = code => {
    if (!code) return;
    const oInput = document.createElement("textarea");
    oInput.value = code;
    document.body.appendChild(oInput);
    oInput.select(); // 选择对象;
    document.execCommand("Copy"); // 执行浏览器复制命令
    ElMessage({
        message: "Copy Success",
        type: "success"
    });
    oInput.remove();
};
</script>
<style lang="scss" scoped>
.add-container {
    padding-top: 30px;
    background-color: #fafafa;
    height: 100%;
}

.form-container {
    margin: auto;
    padding: 40px;
    width: 800px;
    background-color: #fff;
}

.dialog-footer {
    margin: 60px auto 0;
    width: 100%;
    text-align: center;
}

.booking-no {
    padding: 30px 0 20px;
    text-align: center;

    span {
        font-size: 30px;
        font-weight: 700;
        padding-right: 4px;
    }
}
</style>